<template>
  <div class="login-container">
    <!-- 顶部装饰 -->
    <div class="decoration-top">
      <div class="pink-circle"></div>
      <div class="pink-blob"></div>
    </div>
    
    <!-- 登录表单 -->
    <div class="form-container">
      <h2 class="form-title">欢迎回来</h2>
      
      <van-cell-group inset class="form-group">
        <van-field
          v-model="loginForm.name"
          label="账号"
          placeholder="请输入账号"
          left-icon="user-o"
          :style="{ '--field-label-color': '#ff6b8b' }"
        />
        
        <van-field
          v-model="loginForm.password"
          label="密码"
          placeholder="请输入密码"
          type="password"
          left-icon="lock"
          :style="{ '--field-label-color': '#ff6b8b' }"
        />
      </van-cell-group>
      
      <van-button
        @click="onClickLogin"
        type="primary"
        size="large"
        round
        block
        class="login-btn"
      >
        登录
      </van-button>
      
      <div class="goto">
        <span class="goto-text" style="margin: 0 auto;">还没有账号？</span>
        <div style="text-align: center;">
          <van-button 
            @click="onRegister" 
            plain 
            round 
            size="small"
            color="#ff6b8b"
			
          >
            立即注册
          </van-button>
        </div>
      </div>
    </div>
    
    <!-- 底部装饰 -->
    <div class="decoration-bottom">
      <div class="pink-wave"></div>
    </div>
  </div>
</template>

<script>
import { showToast } from 'vant';
import { loginAPI } from "@/api/user.js";
import { useUserStore } from '@/stores/user.js';
const userStore = useUserStore();

export default {
  data() {
    return {
      loginForm: {
        name: "dingding",
        password: "123456",
      },
    };
  },

  mounted() {
    if (userStore.theUser) {
      this.loginForm.name = userStore.theUser.name;
    }
  },

  methods: {
    onClickLogin() {
      if (!this.loginForm.name || !this.loginForm.password) {
        showToast({
          message: "账号或密码不能为空",
          className: 'pink-toast'
        });
        return;
      }

      loginAPI(this.loginForm).then(result => {
        showToast({ 
          message: "登录成功！", 
          duration: 1000,
          className: 'pink-toast'
        });
        
        userStore.setToken(result.data.token);
        userStore.setUser(result.data.user);

        let toPath = this.$route.params.redirect || "user";
        setTimeout(() => {
          this.$router.replace({ path: toPath });
        }, 1000);
      }).catch(err => {
        showToast({
          message: err.message || "登录失败",
          className: 'pink-toast-error'
        });
      });
    },

    onRegister() {
      this.$router.push({ name: "register" });
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  height: 100vh;
  background-color: #fff5f7;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.decoration-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  //背景的俩圆
  .pink-circle {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: rgba(255, 182, 193, 0.2);
  }
  
  .pink-blob {
    position: absolute;
    top: 20%;
    left: -50px;
    width: 150px;
    height: 150px;
    background-color: rgba(255, 107, 139, 0.15);
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
  }
}

.form-container {
  padding: 0 30px;
  z-index: 2;
  
  .form-title {
    text-align: center;
    color: #ff6b8b;
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(255, 107, 139, 0.2);
  }
  
  .form-group {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(255, 107, 139, 0.1);
    
    :deep(.van-field__label) {
      color: var(--field-label-color, #ff6b8b);
    }
    
    :deep(.van-field__control) {
      color: #666;
    }
  }
  
  .login-btn {
    background: linear-gradient(to right, #ff8a98, #ff6b8b);
    border: none;
    height: 44px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(255, 107, 139, 0.3);
  }
  
  .goto {
    text-align: center;
    
    .goto-text {
      color: #888;
      margin-right: 10px;
      font-size: 14px;
    }
  }
}



// 自定义粉色主题的toast
:deep(.pink-toast) {
  background: linear-gradient(to right, #ff8a98, #ff6b8b);
  color: white;
  border-radius: 20px;
}

:deep(.pink-toast-error) {
  background: #ff4757;
  color: white;
  border-radius: 20px;
}
</style>